<template>
  <div class="pieChartEcahrts-box">
    <!-- 背景图 -->
    <!-- <div class="BgImageBox"></div> -->
    <!-- 饼图 -->
    <div
      ref="myChartsRef"
      :style="{ height: height, width: width }"
      class="echarts"
    ></div>
  </div>
</template>
<script setup>
import { nextTick } from "vue"
const emit = defineEmits(["click_Fun"])
const { appContext } = getCurrentInstance()
const { $echarts, fontSize } = appContext.config.globalProperties

const props = defineProps({
  width: {
    default: "100%",
    type: String
  },
  height: {
    default: "100%",
    type: String
  },
  pieChartObj: {
    type: Object
  }
})

const myChartsRef = ref()

// 渲染echarts
const initEcharts = () => {
  let myChart = $echarts.getInstanceByDom(myChartsRef.value)
  if (myChart) {
    myChart.dispose()
  }
  myChart = $echarts.init(myChartsRef.value)
  let danwei = props.pieChartObj.danwei
  const resData = props.pieChartObj.pieChartList
  let option = {
    //你的代码
    legend: {
      orient: "vertical",
      top: "middle",
      right: 10,
      icon: "circle",
      type: "scroll",
      // pageIconSize: [10, 10],
      // pageIconColor: "#6494f3",
      // pageIconInactiveColor: "#ccc",
      formatter: function (name) {
        // pieData是饼图的数组数据
        let data = resData
        let tarValue = 0
        let age = ""
        for (let i = 0, l = data.length; i < l; i++) {
          if (data[i].name == name) {
            tarValue = data[i].value
            age = data[i].age
          }
        }
        let arr = [
          "{a|" + name + "}",
          "{b|" + age + "}",
          "{c|" + tarValue + "}",
          "{b|" + danwei + "}"
        ]
        return arr.join("")
      },
      textStyle: {
        // 添加
        padding: [0, 0, 0, 0],
        rich: {
          a: {
            fontSize: fontSize(30),
            width: fontSize(160),
            right: 50,
            color: "#CAF0FF"
          },
          b: {
            fontSize: fontSize(30),
            width: fontSize(80),
            color: "#FFFFFF"
          },
          c: {
            fontSize: fontSize(30),
            color: "#FFFFFF",
            fontWeight: 400
          },
          d: {
            fontSize: fontSize(30),
            color: "#FFFFFF",
            fontWeight: 400
          }
        }
      }
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: props.pieChartObj.radius,
        center: props.pieChartObj.center,
        z: 12,
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 0,
          color: props.pieChartObj.colorList
            ? function (params) {
                return props.pieChartObj.colorList[params.dataIndex]
              }
            : ""
        },
        labelLine: {
          show: false
        },
        data: resData
      }
    ]
  }
  console.log(option.series[0].itemStyle)

  setTimeout(() => {
    myChart.resize()
  }, 1000)
  myChart.setOption(option)
}

onMounted(() => {
  console.log(props.pieChartObj)

  nextTick(() => {
    initEcharts()
  })
  addEventListener("resize", () => {
    initEcharts()
  })
})

// watch(
//   () => props.option,
//   (val) => {
//     //// console.log(val);
//     nextTick(() => {
//       if (myChart.value) {
//         initEcharts()
//       }
//     })
//   },
//   {
//     deep: true
//   }
// )
</script>
<style scoped lang="less">
.pieChartEcahrts-box {
  width: 100%;
  height: 100%;
  position: relative;
  .echarts {
    width: 100%;
    height: 100%;
  }
  .BgImageBox {
    position: absolute;
    left: 11%;
    top: 15%;
    width: 112px;
    height: 112px;
    // background-color: red;
    background: url("@/assets/Left/Plan/HUANXINGTUWAIKUANG@2x.png") no-repeat
      center;
    background-size: 100% 100%;
  }
}
</style>
